<template>
    <div>
        <h1>名字：{{name}}</h1>
        <h1>年龄：{{age}}</h1>
        <h1>数量：{{num}}</h1>
        <!-- <input type="text" v-model="num">
        <input type="text" :value="num" @input="changeValue"> -->
    </div>
</template>

<script>
// mapState 辅助函数
import {mapState} from "vuex"

// 将想要用到全局state数据，放置在组件的compute内部使用，v-model的内容将其获取和设置分开使用即可
let mapStateObj = mapState({
    name:"name",
    age:state=>state.age,
    num(state){
        console.log(this);
        return this.firstName +state.num
    }
})

export default {
    data(){
        return{
            firstName:"zhao"
        }
    },
    // 计算属性
    // computed:{
    //     name(){
    //         return this.$store.state.name
    //     },
    //     age(){
    //         return this.$store.state.age
    //     },
    //     num:{
    //         get(){
    //             return this.$store.state.num
    //         },
    //         set(val){
    //             return this.$store.commit("setNum",val)
    //         }
    //     }
    // },
    // 第一种映射方式
    // computed:mapState(["name","age","num"]),
    // methods:{
    //     changeValue(e){
    //         this.$store.commit("setNum",e.target.value)
    //     }
    // },
    // 第二种映射方式
    // computed:mapState({
    //     name:"name",
    //     age:(state)=>state.age,
    //     num(state){
    //         console.log(this);
    //         return this.firstName +state.num
            
    //     }
    // }),
    // 第三种映射方式
    computed:{
        reserve(){
            return this.firstName.split("").reserve().join("")
        },
        ...mapStateObj
    },
    mounted(){
        console.log(this.$store.state);
        
    }
}
</script>

<style>

</style>